// password 密码 tab的内容
import { PopUpStyled, StyledPwd } from './style'
import { Form, FormItem, Password, Trigger } from '@kedacom/react-next'
import React, { forwardRef } from 'react'
import HelpView from '../Help'
import { PasswordViewProps } from './interface'
import useIndexHook from './indexServer'

const UpdatePasswordView = (props: PasswordViewProps, ref: React.Ref<unknown> | undefined) => {
	const { INPUT_WIDTH, formData, onInputBlur, onInputFocus, onInputChange } = useIndexHook(props, ref)
	const showCurrentPwd = props.isShowCurrentPwd === false ? false : true
	const isCurrentReadOnly = formData.newPwd && formData.newPwdCheck === false ? true : false
	const isNewPwdReadOnly = showCurrentPwd ? formData.currentPwdCheckIcon !== 'right' : false //新密码只读的条件
	const confirmPwdReadOnly = !formData.newPwdCheck //确认密码只读的条件
	const isShowRememberNewPwd = props.isShowRememberNewPwd
	return (
		<StyledPwd className="password-wrap">
			<Form className="form">
				{showCurrentPwd ? (
					<FormItem label="当前密码">
						<Password
							readOnly={isCurrentReadOnly}
							width={INPUT_WIDTH}
							value={formData.currentPwd}
							placeholder={'请输入当前密码'}
							showEye={false}
							onChange={(e, v) => {
								onInputChange(v, 'currentPwd')
							}}
							onBlur={(e, v) => {
								onInputBlur(v, 'currentPwd')
							}}
						/>
						{formData.currentPwdCheckIcon && (
							<p className={`check-wrap ${formData.currentPwdCheckIcon}`}>
								<span className={`check-icon`} />
								<span className={`check-text`}>
									{formData.currentPwdCheckIcon === 'right' && '密码一致'}
									{formData.currentPwdCheckIcon === 'error' && '密码不一致'}
								</span>
							</p>
						)}
						{isShowRememberNewPwd === true && (
							<span className="bottom-tip warn-text">
								密码修改后，需使用新密码重新登录，请牢记新密码！
							</span>
						)}
					</FormItem>
				) : null}
				<FormItem label="新密码" className="newPwd-item-wrap">
					<Password
						readOnly={isNewPwdReadOnly}
						width={INPUT_WIDTH}
						value={formData.newPwd}
						placeholder={'请输入新密码'}
						showEye={false}
						maxLength={16}
						onFocus={(e, v) => {
							onInputFocus(v, 'newPwd')
						}}
						onChange={(e, v) => {
							onInputChange(v, 'newPwd')
						}}
						onBlur={(e, v) => {
							onInputBlur(v, 'newPwd')
						}}
					/>
					<>
						{formData.newPwd && (
							<p className={`check-wrap ${formData.newPwdCheckIcon}`}>
								<span className={`check-icon`} />
								<span className={`check-text`}>{formData.newPwdCheckText}</span>
							</p>
						)}
						{formData.newPwd && (
							<span className="help-wrap">
								<Trigger
									trigger="hover"
									popupPlacement="right"
									popup={
										<PopUpStyled>
											<HelpView isShowCloseBtn={false} />
										</PopUpStyled>
									}
								>
									<span className="help-btn">帮助</span>
								</Trigger>
							</span>
						)}
					</>
					<span className="bottom-tip">{formData.newPwdTip}</span>
				</FormItem>
				<FormItem label="确认密码">
					<Password
						readOnly={confirmPwdReadOnly}
						width={INPUT_WIDTH}
						value={formData.confirmPwd}
						placeholder={'请输入确认密码'}
						showEye={false}
						maxLength={16}
						onChange={(e, v) => {
							onInputChange(v, 'confirmPwd')
						}}
						onFocus={(e, v) => {
							onInputFocus(v, 'confirmPwd')
						}}
					/>
					<p className={`check-wrap ${formData.confirmPwdCheckIcon}`}>
						<span className={`check-icon`} />
						<span className={`check-text`}>{formData.confirmPwdCheckText}</span>
					</p>
				</FormItem>
			</Form>
		</StyledPwd>
	)
}

export default forwardRef(UpdatePasswordView)
